<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <a href="#" class="lj" style="width: 100px;">空链接</a>
    <input class="box" type="text" placeholder="please input username" data-index="123">
</body>
<script>    
    // const em1=document.querySelector('.lj');
    // console.log(em1.href);
    const em1=document.querySelector('.lj');
    console.log(em1.href);//对象.属性：访问元素本身具有的属性
    em1.href='https://www.baidu.com';
    em1.innerHTML='百度一下';
    console.log('-----------------------------');
    //setAttribute('属性','值'):可以设置自带属性或自定义属性
    em1.setAttribute('href','https://www.mi.com');
    console.log(em1.getAttribute('href'));
    const em2=document.querySelector('input');
    console.log(em2.getAttribute('data-index'));
    em2.setAttribute('data-index','456');
    //访问自定义属性:对象.dataset.属性[='值'];
    console.log(em2.dataset.index);
    em2.dataset.index='789';
    em1.style.color='red';
    em1.style.fontSize='34px';//这里的所有属性的中间横杠都去掉,后半部分首字母大写,如margin-top应该写成marginTop
    em2.className='font box';
</script>
</html>